<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <input type="hidden" name="row[id]" value="{$row.id}">
    
    <!-- 选项卡导航 -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#course-settings" aria-controls="course-settings" role="tab" data-toggle="tab">课程设置</a>
        </li>
        <li role="presentation">
            <a href="#other-settings" aria-controls="other-settings" role="tab" data-toggle="tab">其他设置</a>
        </li>
        <li role="presentation">
            <a href="#data-statistics" aria-controls="data-statistics" role="tab" data-toggle="tab">数据统计</a>
        </li>
    </ul>

    <!-- 选项卡内容 -->
    <div class="tab-content" style="margin-top: 20px;">
        <!-- 第一个选项卡：课程设置 -->
        <div role="tabpanel" class="tab-pane active" id="course-settings">
            <div class="form-group">
                <label for="c-course_name" class="control-label col-xs-12 col-sm-2">课程名称:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-course_name" name="row[course_name]" type="text" class="form-control" data-rule="required" placeholder="请输入课程名称" value="{$row.course_name}">
                </div>
            </div>
            
            <div class="form-group">
                <label for="c-course_cover" class="control-label col-xs-12 col-sm-2">课程封面:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group">
                        <input id="c-course_cover" name="row[course_cover]" type="text" class="form-control" placeholder="请选择课程封面" value="{$row.course_cover}">
                        <div class="input-group-addon no-border no-padding">
                            <span><button type="button" id="plupload-course_cover" class="btn btn-danger plupload" data-input-id="c-course_cover" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-course_cover"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                            <span><button type="button" id="fachoose-course_cover" class="btn btn-primary fachoose" data-input-id="c-course_cover" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                        </div>
                        <span class="msg-box n-right" for="c-course_cover"></span>
                    </div>
                    <ul class="row list-inline plupload-preview" id="p-course_cover"></ul>
                </div>
            </div>
            
            <div class="form-group">
                <label for="c-course_content" class="control-label col-xs-12 col-sm-2">课程内容:</label>
                <div class="col-xs-12 col-sm-8">
                    <textarea id="c-course_content" name="row[course_content]" class="form-control editor" rows="5" placeholder="请输入课程内容">{$row.course_content}</textarea>
                </div>
            </div>
            
            <div class="form-group">
                <label for="c-course_type" class="control-label col-xs-12 col-sm-2">课程类型:</label>
                <div class="col-xs-12 col-sm-8">
                    <select id="c-course_type" name="row[course_type]" class="form-control">
                        <option value="">请选择课程类型</option>
                        <option value="1" {if $row.course_type=='1'}selected{/if}>公益活动</option>
                        <option value="2" {if $row.course_type=='2'}selected{/if}>社区活动</option>
                        <option value="3" {if $row.course_type=='3'}selected{/if}>研学活动</option>
                        <option value="4" {if $row.course_type=='4'}selected{/if}>趣味活动</option>
                    </select>
                </div>
            </div>
            
            <div class="form-group">
                <label for="c-class_type" class="control-label col-xs-12 col-sm-2">课堂类型:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-class_type" name="row[class_type]" type="text" class="form-control" value="社区课堂" readonly>
                </div>
            </div>

            
            <div class="form-group">
                <label for="c-address" class="control-label col-xs-12 col-sm-2">上课地点:</label>
                <div class="col-xs-12 col-sm-8">
                    <textarea id="c-address" name="row[address]" class="form-control" rows="3" placeholder="请输入上课地点描述">{$row.address}</textarea>
                </div>
            </div>
            
            <div class="form-group">
                <label for="c-date_restriction" class="control-label col-xs-12 col-sm-2">日期限制:</label>
                <div class="col-xs-12 col-sm-8">
                    <select id="c-date_restriction" name="row[date_restriction]" class="form-control" style="margin-bottom: 10px;">
                        <option value="" {if $row.date_restriction==''}selected{/if}>无限制</option>
                        <option value="workdays" {if $row.date_restriction=='workdays'}selected{/if}>仅工作日（周一至周五）</option>
                        <option value="weekends" {if $row.date_restriction=='weekends'}selected{/if}>仅周末（周六、周日）</option>
                        <option value="custom_weekdays" {if $row.date_restriction=='custom_weekdays'}selected{/if}>自定义周几</option>
                        <option value="specific_dates" {if $row.date_restriction=='specific_dates'}selected{/if}>指定日期</option>
                    </select>
                </div>
            </div>

            <div class="form-group" id="custom-weekdays-group" style="{if $row.date_restriction == 'custom_weekdays'}display: block;{else}display: none;{/if}">
                <label class="control-label col-xs-12 col-sm-2">选择周几:</label>
                <div class="col-xs-12 col-sm-8">
                    <input type="hidden" id="c-custom_weekdays" name="row[custom_weekdays]" value="{$row.custom_weekdays ?? ''}">
                    <div class="checkbox-inline">
                        <label><input type="checkbox" value="1" class="weekday-checkbox" {if in_array('1', explode(',', $row.custom_weekdays ?? ''))}checked{/if}> 周一</label>
                        <label><input type="checkbox" value="2" class="weekday-checkbox" {if in_array('2', explode(',', $row.custom_weekdays ?? ''))}checked{/if}> 周二</label>
                        <label><input type="checkbox" value="3" class="weekday-checkbox" {if in_array('3', explode(',', $row.custom_weekdays ?? ''))}checked{/if}> 周三</label>
                        <label><input type="checkbox" value="4" class="weekday-checkbox" {if in_array('4', explode(',', $row.custom_weekdays ?? ''))}checked{/if}> 周四</label>
                        <label><input type="checkbox" value="5" class="weekday-checkbox" {if in_array('5', explode(',', $row.custom_weekdays ?? ''))}checked{/if}> 周五</label>
                        <label><input type="checkbox" value="6" class="weekday-checkbox" {if in_array('6', explode(',', $row.custom_weekdays ?? ''))}checked{/if}> 周六</label>
                        <label><input type="checkbox" value="7" class="weekday-checkbox" {if in_array('7', explode(',', $row.custom_weekdays ?? ''))}checked{/if}> 周日</label>
                    </div>
                </div>
            </div>

            <div class="form-group" id="specific-dates-group" style="{if $row.date_restriction == 'specific_dates'}display: block;{else}display: none;{/if}">
                <label for="c-specific_dates" class="control-label col-xs-12 col-sm-2">指定日期:</label>
                <div class="col-xs-12 col-sm-8">
                    <textarea id="c-specific_dates" name="row[specific_dates]" class="form-control" rows="3" placeholder="请输入允许的日期，每行一个，格式：2024-01-15">{$row.specific_dates ?? ''}</textarea>
                    <small class="help-block">每行输入一个日期，格式为：YYYY-MM-DD</small>
                </div>
            </div>
            
            <div class="form-group">
                <label for="c-course_date" class="control-label col-xs-12 col-sm-2">课程日期:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-course_date" name="row[date]" type="text" class="form-control restricted-datetimepicker" data-rule="required" data-date-format="YYYY-MM-DD" data-use-current="true" placeholder="请选择课程日期" value="{$row.date}">
                    <div id="quick-date-buttons" style="margin-top: 8px; display: none;">
                        <label style="font-weight: normal; margin-right: 10px;">快速选择：</label>
                        <button type="button" class="btn btn-xs btn-primary quick-date-btn" data-days="7" style="margin-right: 5px;">
                            <i class="fa fa-calendar"></i> 未来7天
                        </button>
                        <button type="button" class="btn btn-xs btn-primary quick-date-btn" data-days="30" style="margin-right: 5px;">
                            <i class="fa fa-calendar"></i> 未来30天
                        </button>
                        <button type="button" class="btn btn-xs btn-primary quick-date-btn" data-days="90">
                            <i class="fa fa-calendar"></i> 未来90天
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="c-start_time" class="control-label col-xs-12 col-sm-2">课程时间:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-start_time" name="row[start_time]" type="text" class="form-control" data-rule="required" placeholder="如：09:00-11:00" value="{$row.start_time}">
                </div>
            </div>

            <div class="form-group">
                <label for="c-is_yuyue" class="control-label col-xs-12 col-sm-2">是否预约:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-is_yuyue" name="row[is_yuyue]" type="checkbox" value="1">
                </div>
            </div>

            <div class="form-group">
                <label for="c-is_yuyue" class="control-label col-xs-12 col-sm-2">自定义标签:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-tags" name="row[tags]" type="text" class="form-control" value="{$row.tags}"  placeholder="请输入标签，多个标签用英文逗号隔开">
                </div>
            </div>
            
            <div class="form-group">
                <label for="c-status" class="control-label col-xs-12 col-sm-2">状态:</label>
                <div class="col-xs-12 col-sm-8" id="div-status">
                    <input id="c-status" name="row[status]" type="hidden" value="{$row.status}">
                    <a href="javascript:;" data-toggle="switcher" class="btn-switcher {if $row.status=='1'}active{else}text-gray{/if}" data-input-id="c-status" data-yes="1" data-no="0">
                        <i class="fa fa-toggle-on fa-2x {if $row.status!='1'}fa-flip-horizontal{/if}"></i>
                    </a>
                    <div data-favisible="switch=1" class="p-3">正常</div>
                    <div data-favisible="switch=0" class="p-3">禁用</div>
                </div>
            </div>
        </div>

        <!-- 第二个选项卡：其他设置 -->
        <div role="tabpanel" class="tab-pane" id="other-settings">
            <div class="form-group">
                <label for="c-checkin_before_class" class="control-label col-xs-12 col-sm-2">上课前打卡时间:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group">
                        <input id="c-checkin_before_class" name="row[checkin_before_class]" type="number" class="form-control" placeholder="请输入分钟数" value="{$row.checkin_before_class|default='30'}">
                        <span class="input-group-addon">分钟</span>
                    </div>
                    <span class="help-block">学生可在上课前多少分钟开始打卡</span>
                </div>
            </div>
            
            <div class="form-group">
                <label for="c-checkin_after_class" class="control-label col-xs-12 col-sm-2">上课后打卡时间:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group">
                        <input id="c-checkin_after_class" name="row[checkin_after_class]" type="number" class="form-control" placeholder="请输入分钟数" value="{$row.checkin_after_class|default='30'}">
                        <span class="input-group-addon">分钟</span>
                    </div>
                    <span class="help-block">学生可在上课后多少分钟内打卡</span>
                </div>
            </div>
            
            <div class="form-group">
                <label for="c-evaluation_after_class" class="control-label col-xs-12 col-sm-2">下课后评价时间:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group">
                        <input id="c-evaluation_after_class" name="row[evaluation_after_class]" type="number" class="form-control" placeholder="请输入分钟数" value="{$row.evaluation_after_class|default='60'}">
                        <span class="input-group-addon">分钟</span>
                    </div>
                    <span class="help-block">学生可在下课后多少分钟内进行课程评价</span>
                </div>
            </div>
            
            <div class="form-group">
                <label for="c-class_id" class="control-label col-xs-12 col-sm-2">上课班级:</label>
                <div class="col-xs-12 col-sm-8">
                    <select id="c-class_id" name="row[class_id]" class="form-control" data-live-search="true">
                        <option value="">请选择班级</option>
                    </select>
                </div>
            </div>
            
            <div class="form-group">
                <label for="c-admin_id" class="control-label col-xs-12 col-sm-2">管理员:</label>
                <div class="col-xs-12 col-sm-8">
                    <select id="c-admin_id" name="row[admin_id]" class="form-control" data-live-search="true">
                        <option value="">请选择管理员</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 第三个选项卡：数据统计 -->
        <div role="tabpanel" class="tab-pane" id="data-statistics">
            <!-- 统计筛选区域 -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">统计筛选</h4>
                </div>
                <div class="panel-body">
                    <form id="statsForm" class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">时间范围:</label>
                            <div class="col-xs-12 col-sm-4">
                                <div class="input-group">
                                    <input id="start_time" name="start_time" type="text" class="form-control datetimepicker" value="{$stats.start_time|default=''}" placeholder="开始时间">
                                    <span class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <div class="input-group">
                                    <input id="end_time" name="end_time" type="text" class="form-control datetimepicker" value="{$stats.end_time|default=''}" placeholder="结束时间">
                                    <span class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-2">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" id="current_class_only" name="current_class_only" value="1" checked> 当前课程
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">社区小组:</label>
                            <div class="col-xs-12 col-sm-4">
                                <select id="community_id" name="community_id" class="form-control">
                                    <option value="">请选择社区小组</option>
                                </select>
                            </div>
                            
                            <label class="control-label col-xs-12 col-sm-2">课程类型:</label>
                            <div class="col-xs-12 col-sm-4">
                                <select id="course_type" name="course_type" class="form-control">
                                    <option value="">请选择课程类型</option>
                                    <option value="1">理论课</option>
                                    <option value="2">实践课</option>
                                    <option value="3">活动课</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2"></label>
                            <div class="col-xs-12 col-sm-10">
                                <button type="button" id="btnSearch" class="btn btn-primary">
                                    <i class="fa fa-search"></i> 搜索
                                </button>
                                <button type="reset" class="btn btn-default">
                                    <i class="fa fa-refresh"></i> 重置
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 统计数据区域 -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">统计数据</h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-blue"><i class="fa fa-users"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">上课人数</span>
                                    <span class="info-box-number" id="student_count">{$stats.student_count|default=0}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-green"><i class="fa fa-calendar"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">课节数</span>
                                    <span class="info-box-number" id="class_count">{$stats.class_count|default=0}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-yellow"><i class="fa fa-clock-o"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">打卡次数</span>
                                    <span class="info-box-number" id="clock_count"><?php echo ($stats['checkin_before'] ?? 0) + ($stats['checkin_after'] ?? 0); ?></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-red"><i class="fa fa-exclamation-triangle"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">请假人数</span>
                                    <span class="info-box-number" id="leave_count">{$stats.leave_count|default=0}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row" style="margin-top: 15px;">
                        <div class="col-md-6">
                            <div class="info-box">
                                <span class="info-box-icon bg-aqua"><i class="fa fa-sign-in"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">上课前打卡</span>
                                    <span class="info-box-number" id="checkin_before">{$stats.checkin_before|default=0}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-box">
                                <span class="info-box-icon bg-teal"><i class="fa fa-sign-out"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">上课后打卡</span>
                                    <span class="info-box-number" id="checkin_after">{$stats.checkin_after|default=0}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row" style="margin-top: 15px;">
                        <div class="col-md-6">
                            <div class="info-box">
                                <span class="info-box-icon bg-purple"><i class="fa fa-comment"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">评价数</span>
                                    <span class="info-box-number" id="evaluation_count">{$stats.evaluation_count|default=0}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 打卡统计表格 -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">打卡统计</h4>
                </div>
                <div class="panel-body">
                    <style>
                        .clock-table {
                            border-collapse: separate;
                            border-spacing: 0 10px;
                        }
                        .clock-table thead th {
                            border-bottom: 2px solid #e5e5e5;
                            font-weight: 600;
                            color: #333;
                            padding: 12px 15px;
                            background-color: #f9f9f9;
                        }
                        .clock-table tbody tr {
                            background-color: #fff;
                            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
                            transition: all 0.3s;
                        }
                        .clock-table tbody tr:hover {
                            transform: translateY(-2px);
                            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                        }
                        .clock-table tbody td {
                            padding: 15px;
                            vertical-align: middle;
                            border-top: none;
                            border-bottom: 1px solid #eee;
                        }
                        .user-info {
                            display: flex;
                            align-items: center;
                        }
                        .user-avatar {
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            background-color: #f0f0f0;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-right: 12px;
                            overflow: hidden;
                            border: 2px solid #e9ecef;
                        }
                        .user-avatar img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                        .user-avatar i {
                            font-size: 18px;
                            color: #999;
                        }
                        .user-details {
                            flex: 1;
                        }
                        .user-name {
                            font-weight: 600;
                            color: #333;
                            margin-bottom: 2px;
                        }
                        .user-id {
                            font-size: 12px;
                            color: #999;
                        }
                        .clock-type-badge {
                            padding: 4px 10px;
                            border-radius: 12px;
                            font-size: 12px;
                            font-weight: 500;
                            display: inline-block;
                        }
                        .clock-type-badge.type-1 {
                            background-color: #e7f5ff;
                            color: #339af0;
                        }
                        .clock-type-badge.type-2 {
                            background-color: #fff3bf;
                            color: #f59f00;
                        }
                        .clock-type-badge.type-3 {
                            background-color: #d3f9d8;
                            color: #51cf66;
                        }
                        .clock-time {
                            font-weight: 500;
                            color: #495057;
                        }
                        .info-box {
                            display: block;
                            min-height: 90px;
                            background: #fff;
                            width: 100%;
                            box-shadow: 0 1px 1px rgba(0,0,0,0.1);
                            border-radius: 2px;
                            margin-bottom: 15px;
                        }
                        .info-box-icon {
                            border-top-left-radius: 2px;
                            border-top-right-radius: 0;
                            border-bottom-right-radius: 0;
                            border-bottom-left-radius: 2px;
                            display: block;
                            float: left;
                            height: 90px;
                            width: 90px;
                            text-align: center;
                            font-size: 45px;
                            line-height: 90px;
                            background: rgba(0,0,0,0.2);
                        }
                        .info-box-icon > i {
                            color: #fff;
                        }
                        .info-box-content {
                            padding: 5px 10px;
                            margin-left: 90px;
                        }
                        .info-box-text {
                            text-transform: uppercase;
                            font-weight: bold;
                            font-size: 13px;
                            display: block;
                        }
                        .info-box-number {
                            display: block;
                            font-weight: bold;
                            font-size: 18px;
                        }
                        .bg-blue {background-color: #3c8dbc !important;}
                        .bg-green {background-color: #00a65a !important;}
                        .bg-yellow {background-color: #f39c12 !important;}
                        .bg-red {background-color: #dd4b39 !important;}
                        .bg-aqua {background-color: #00c0ef !important;}
                        .bg-teal {background-color: #39cccc !important;}
                        .bg-purple {background-color: #605ca8 !important;}
                    </style>
                    
                    <table id="clockDataTable" class="table clock-table">
                        <thead>
                            <tr>
                                <th>用户信息</th>
                                <th>打卡时间</th>
                                <th>打卡类型</th>
                                <th>创建时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            {if $clockData}
                                {foreach $clockData as $item}
                                <tr>
                                    <td>
                                        <div class="user-info">
                                            <div class="user-avatar">
                                                {if isset($item.user_info.avatar) && $item.user_info.avatar}
                                                    <img src="{$item.user_info.avatar}" alt="头像">
                                                {else}
                                                    <i class="fa fa-user"></i>
                                                {/if}
                                            </div>
                                            <div class="user-details">
                                                <div class="user-name">{$item.user_info.nickname|default=$item.user_info.username|default='未知用户'}</div>
                                                <div class="user-id">ID: {$item.user_id}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="clock-time">{$item.clock_time}</td>
                                    <td>
                                        {switch $item.clock_type}
                                            {case 1}<span class="clock-type-badge type-1">上课前打卡</span>{/case}
                                            {case 2}<span class="clock-type-badge type-2">上课后打卡</span>{/case}
                                            {case 3}<span class="clock-type-badge type-3">下课后评价</span>{/case}
                                            {default}<span class="clock-type-badge">未知类型</span>{/default}
                                        {/switch}
                                    </td>
                                    <td>{$item.create_time}</td>
                                </tr>
                                {/foreach}
                            {else}
                                <tr>
                                    <td colspan="4" class="text-center" style="padding: 30px;">
                                        <i class="fa fa-info-circle fa-2x text-muted mb-2"></i>
                                        <div class="text-muted">暂无打卡数据</div>
                                    </td>
                                </tr>
                            {/if}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

